<template>
  <!-- 动态背景 -->
  <div class="bg-pattern"></div>
  
  <div class="container">
    <h1 class="page-title">相册管理</h1>
    
    <!-- 控制面板 -->
    <div class="control-panel">
      <button 
        class="create-button"
        @click="openAlbumDialog('create')"
      >
        <i class="fas fa-plus"></i>
        <span>新建相册</span>
      </button>
      
      <div class="search-container">
        <i class="fas fa-search"></i>
        <input 
          type="text" 
          placeholder="搜索相册..." 
          v-model="searchQuery"
          class="search-input"
        >
      </div>
    </div>
    
    <!-- 相册网格 -->
    <div class="albums-grid">
      <div 
        v-for="album in filteredAlbums" 
        :key="album.id"
        class="album-card"
      >
        <div class="album-cover" :style="{ backgroundImage: `url(${album.cover})` }">
          <div class="album-overlay">
            <h3 class="album-title">{{ album.name }}</h3>
            <div class="album-stats">
              <span><i class="fas fa-images"></i> {{ album.photoCount }}</span>
              <span><i class="fas fa-calendar"></i> {{ album.lastUpdate }}</span>
            </div>
          </div>
        </div>
        
        <div class="album-info">
          <p class="album-description">{{ album.description }}</p>
        </div>
        
        <div class="album-actions">
          <button 
            class="action-button edit-button"
            @click="openAlbumDialog('edit', album)"
          >
            <i class="fas fa-edit"></i>
            <span>编辑</span>
          </button>
          <button 
            class="action-button delete-button"
            @click="deleteAlbum(album.id)"
          >
            <i class="fas fa-trash"></i>
            <span>删除</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredAlbums.length === 0" class="empty-state">
      <i class="fas fa-images"></i>
      <h3>暂无相册</h3>
      <p>点击上方按钮创建您的第一个相册</p>
    </div>
  </div>
  
  <!-- 创建/编辑相册弹窗 -->
  <div class="dialog-overlay" v-if="albumDialogVisible">
    <div class="dialog-card">
      <div class="dialog-header">
        <h2 class="dialog-title">{{ albumDialogTitle }}</h2>
        <button class="close-button" @click="closeAlbumDialog">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="dialog-body">
        <div class="form-group">
          <label>相册名称</label>
          <input 
            type="text" 
            v-model="albumForm.name"
            placeholder="输入相册名称"
            class="form-input"
          >
        </div>
        
        <div class="form-group">
          <label>封面图片</label>
          <div class="cover-upload">
            <div 
              class="cover-preview"
              :style="{ backgroundImage: `url(${albumForm.cover})` }"
            >
              <div v-if="!albumForm.cover" class="cover-placeholder">
                <i class="fas fa-image"></i>
                <span>选择封面</span>
              </div>
            </div>
            <button 
              class="upload-button"
              @click="triggerFileUpload"
            >
              <i class="fas fa-upload"></i>
              <span>上传图片</span>
            </button>
            <input 
              type="file" 
              ref="fileInput" 
              accept="image/*" 
              @change="handleCoverUpload"
              class="file-input"
            />
          </div>
        </div>
        
        <div class="form-group">
          <label>相册描述</label>
          <textarea 
            v-model="albumForm.description"
            placeholder="输入相册描述..."
            class="form-textarea"
          ></textarea>
        </div>
      </div>
      
      <div class="dialog-footer">
        <button class="cancel-button" @click="closeAlbumDialog">
          取消
        </button>
        <button class="confirm-button" @click="handleAlbumSubmit">
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'

// 相册数据
interface Album {
  id: number
  name: string
  description: string
  cover: string
  photoCount: number
  lastUpdate: string
}

const albums = ref<Album[]>([
  {
    id: 1,
    name: '自然风光',
    description: '美丽的自然风景照片集',
    cover: 'https://picsum.photos/id/1018/400/300',
    photoCount: 24,
    lastUpdate: '2024-03-15'
  },
  {
    id: 2,
    name: '城市建筑',
    description: '现代城市建筑摄影',
    cover: 'https://picsum.photos/id/1039/400/300',
    photoCount: 18,
    lastUpdate: '2024-03-10'
  },
  {
    id: 3,
    name: '人物肖像',
    description: '人物特写与肖像摄影',
    cover: 'https://picsum.photos/id/64/400/300',
    photoCount: 32,
    lastUpdate: '2024-03-05'
  },
  {
    id: 4,
    name: '旅行记忆',
    description: '环游世界的精彩瞬间',
    cover: 'https://picsum.photos/id/1062/400/300',
    photoCount: 42,
    lastUpdate: '2024-02-28'
  },
  {
    id: 5,
    name: '美食记录',
    description: '令人垂涎的美食摄影',
    cover: 'https://picsum.photos/id/1080/400/300',
    photoCount: 15,
    lastUpdate: '2024-02-20'
  },
  {
    id: 6,
    name: '宠物日常',
    description: '可爱的宠物生活记录',
    cover: 'https://picsum.photos/id/1060/400/300',
    photoCount: 28,
    lastUpdate: '2024-02-15'
  }
])

// 搜索功能
const searchQuery = ref('')
const filteredAlbums = computed(() => {
  if (!searchQuery.value) return albums.value
  return albums.value.filter(album => 
    album.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    album.description.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// 弹窗状态
const albumDialogVisible = ref(false)
const albumDialogMode = ref<'create' | 'edit'>('create')
const currentAlbumId = ref<number | null>(null)

// 表单数据
const albumForm = reactive({
  name: '',
  description: '',
  cover: ''
})

// 文件上传引用
const fileInput = ref<HTMLInputElement | null>(null)

// 弹窗标题
const albumDialogTitle = computed(() => {
  return albumDialogMode.value === 'create' ? '新建相册' : '编辑相册'
})

// 打开相册弹窗
function openAlbumDialog(mode: 'create' | 'edit', album?: Album) {
  albumDialogMode.value = mode
  
  if (mode === 'edit' && album) {
    currentAlbumId.value = album.id
    albumForm.name = album.name
    albumForm.description = album.description
    albumForm.cover = album.cover
  } else {
    // 重置表单
    albumForm.name = ''
    albumForm.description = ''
    albumForm.cover = ''
  }
  
  albumDialogVisible.value = true
}

// 关闭相册弹窗
function closeAlbumDialog() {
  albumDialogVisible.value = false
}

// 触发文件上传
function triggerFileUpload() {
  if (fileInput.value) {
    fileInput.value.click()
  }
}

// 处理封面上传
function handleCoverUpload(event: Event) {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    const file = input.files[0]
    const reader = new FileReader()
    
    reader.onload = (e) => {
      if (e.target?.result) {
        albumForm.cover = e.target.result as string
      }
    }
    
    reader.readAsDataURL(file)
  }
}

// 表单提交
function handleAlbumSubmit() {
  if (!albumForm.name.trim()) {
    alert('请输入相册名称')
    return
  }
  
  if (albumDialogMode.value === 'create') {
    // 添加新相册
    const newAlbum: Album = {
      id: Date.now(),
      name: albumForm.name,
      description: albumForm.description,
      cover: albumForm.cover || 'https://picsum.photos/400/300?random=' + Date.now(),
      photoCount: 0,
      lastUpdate: new Date().toISOString().split('T')[0]
    }
    
    albums.value.push(newAlbum)
    alert('相册创建成功')
  } else if (currentAlbumId.value) {
    // 更新现有相册
    const index = albums.value.findIndex(a => a.id === currentAlbumId.value)
    if (index !== -1) {
      albums.value[index].name = albumForm.name
      albums.value[index].description = albumForm.description
      albums.value[index].cover = albumForm.cover
      alert('相册更新成功')
    }
  }
  
  closeAlbumDialog()
}

// 删除相册
function deleteAlbum(id: number) {
  if (confirm('确定要删除这个相册吗？')) {
    albums.value = albums.value.filter(album => album.id !== id)
    alert('相册已删除')
  }
}
</script>

<style lang="less" scoped>
@primary: #4a6cf7;
@secondary: #6c5ce7;
@accent: #ff6b6b;
@light-bg: #f8f9fa;
@text-dark: #333;
@text-light: #666;
@border-color: #e0e0e0;
@shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7ff;
  color: @text-dark;
  min-height: 100vh;
}

.bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(74, 108, 247, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(108, 92, 231, 0.05) 0%, transparent 20%);
  z-index: -1;
}

.container {
  padding: 2rem 1.5rem;
  overflow-y: scroll;
    
  /* 滚动条整体样式 */
  scrollbar-width: thin;
  scrollbar-color: #00ffff #0a0a1a;
  
  /* Webkit浏览器滚动条样式 */
  &::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {

    border-radius: 6px;
  }
  
  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #00ffff, #ff00ff);
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    transition: all 0.3s ease;
    
    &:hover {
      background: linear-gradient(45deg, #00ffff, #9D00FF);
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
    }
  }
  
  /* 滚动条角落 */
  &::-webkit-scrollbar-corner {
    background: rgba(10, 10, 26, 0.5);
  }
  
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: @primary;
  font-weight: 700;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, @primary, @secondary);
    border-radius: 2px;
  }
}

.control-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
  justify-content: space-between;
}

.create-button {
  background: linear-gradient(to right, @primary, @secondary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s;
  box-shadow: @shadow;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(74, 108, 247, 0.3);
  }
  
  i {
    font-size: 1.1rem;
  }
}

.search-container {
  position: relative;
  width: 300px;
  
  i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: @text-light;
  }
}

.search-input {
  width: 100%;
  padding: 0.8rem 1.5rem 0.8rem 40px;
  border: 1px solid @border-color;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
  background: white;
  
  &:focus {
    outline: none;
    border-color: @primary;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
  }
}

.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.album-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: @shadow;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
}

.album-cover {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.album-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 1.5rem 1rem 1rem;
  color: white;
}

.album-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.album-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  opacity: 0.9;
  
  i {
    margin-right: 5px;
  }
}

.album-info {
  padding: 1.2rem;
}

.album-description {
  color: @text-light;
  font-size: 0.95rem;
  line-height: 1.5;
}

.album-actions {
  display: flex;
  padding: 0 1.2rem 1.2rem;
  gap: 0.8rem;
}

.action-button {
  flex: 1;
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s;
  
  i {
    font-size: 0.9rem;
  }
}

.edit-button {
  background: rgba(74, 108, 247, 0.1);
  color: @primary;
  
  &:hover {
    background: rgba(74, 108, 247, 0.2);
  }
}

.delete-button {
  background: rgba(255, 107, 107, 0.1);
  color: @accent;
  
  &:hover {
    background: rgba(255, 107, 107, 0.2);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: white;
  border-radius: 12px;
  box-shadow: @shadow;
  
  i {
    font-size: 3rem;
    color: @primary;
    margin-bottom: 1.5rem;
  }
  
  h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: @text-dark;
  }
  
  p {
    color: @text-light;
    max-width: 400px;
  }
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-card {
  width: 90%;
  max-width: 500px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.dialog-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid @border-color;
}

.dialog-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: @text-dark;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: @text-light;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  
  &:hover {
    background: #f5f5f5;
    color: @text-dark;
  }
}

.dialog-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
  
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: @text-dark;
  }
}

.form-input, .form-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid @border-color;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
  background: white;
  
  &:focus {
    outline: none;
    border-color: @primary;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
  }
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

.cover-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cover-preview {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px dashed @border-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: @text-light;
  
  i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: @primary;
  }
}

.upload-button {
  background: rgba(74, 108, 247, 0.05);
  color: @primary;
  border: 1px solid rgba(74, 108, 247, 0.2);
  border-radius: 8px;
  padding: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s;
  
  &:hover {
    background: rgba(74, 108, 247, 0.1);
  }
}

.file-input {
  display: none;
}

.dialog-footer {
  padding: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  border-top: 1px solid @border-color;
}

.cancel-button, .confirm-button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-button {
  background: #f5f5f5;
  color: @text-dark;
  
  &:hover {
    background: #eaeaea;
  }
}

.confirm-button {
  background: linear-gradient(to right, @primary, @secondary);
  color: white;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(74, 108, 247, 0.3);
  }
}
</style>